<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5新特性探索 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header class="header">
    <div class="container">
        <h1 class="logo">我的博客</h1>
        <nav class="main-nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
        </nav>
    </div>
</header>

<main class="container article-container">
    <article class="article-content" role="article">
        <header>
            <h1>HTML5新特性探索</h1>
            <div class="article-meta">
                <span class="author">作者: 张三</span>
                <span class="date">发布时间: <time datetime="2023-05-15">2023年5月15日</time></span>
                <span class="category">分类: 前端开发</span>
            </div>
        </header>

        <img src="./img/html.png" alt="HTML5" class="featured-image" loading="lazy" />

        <div class="article-body">
            <section>
                <p>HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。</p>
            </section>

            <section>
                <h2>语义化标签</h2>
                <p>HTML5引入了许多新的语义化元素，如 &lt;header&gt;, &lt;footer&gt;, &lt;article&gt;, &lt;section&gt; 等，这些标签让网页结构更加清晰，也便于搜索引擎理解网页内容。</p>
            </section>

            <section>
                <h2>多媒体支持</h2>
                <p>HTML5原生支持音频和视频播放，不再需要Flash等插件。使用 &lt;audio&gt; 和 &lt;video&gt; 标签可以轻松嵌入多媒体内容。</p>
                <pre><code>&lt;video width="320" height="240" controls&gt;
&lt;source src="movie.mp4" type="video/mp4"&gt;
&lt;source src="movie.ogg" type="video/ogg"&gt;
您的浏览器不支持HTML5视频标签。
&lt;/video&gt;</code></pre>
            </section>

            <section>
                <h2>Canvas绘图</h2>
                <p>HTML5的 &lt;canvas&gt; 元素提供了一套 JavaScript API，允许开发者绘制图形、动画和游戏。Canvas 适合数据可视化、广告横幅和网页小游戏等。</p>
            </section>

            <section>
                <h2>本地存储</h2>
                <p>HTML5提供了 localStorage 和 sessionStorage 两种本地存储方式，可以在客户端存储数据，减少与服务器通信，提高应用性能。</p>
            </section>
        </div>

        <footer class="article-footer">
            <div class="tags">
                <span>标签: </span>
                <a href="#">HTML5</a>, <a href="#">前端开发</a>, <a href="#">Web技术</a>
            </div>
        </footer>
    </article>

    <section class="comments-section">
        <h2>评论</h2>
        <div id="comments-list">
            <article class="comment">
                <div class="comment-author">
                    <img src="./img/avatar-02.jpg" alt="李四的头像" loading="lazy" />
                    <span>李四</span>
                </div>
                <div class="comment-content">
                    <p>这篇文章写得很好，对HTML5的新特性介绍得很全面！</p>
                    <div class="comment-meta"><time datetime="2023-05-16">2023年5月16日</time></div>
                </div>
            </article>

            <article class="comment">
                <div class="comment-author">
                    <img src="./img/avatar-03.jpg" alt="王五的头像" loading="lazy" />
                    <span>王五</span>
                </div>
                <div class="comment-content">
                    <p>Canvas部分可以再详细一些，期待后续文章！</p>
                    <div class="comment-meta"><time datetime="2023-05-17">2023年5月17日</time></div>
                </div>
            </article>
        </div>

        <form id="comment-form" class="comment-form">
            <h3>发表评论</h3>
            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" placeholder="请输入您的姓名" autocomplete="name" required />
            </div>
            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" placeholder="example@example.com" autocomplete="email" required />
            </div>
            <div class="form-group">
                <label for="comment">评论:</label>
                <textarea id="comment" name="comment" rows="5" placeholder="写下你的评论..." required></textarea>
            </div>
            <button type="submit" class="btn">提交评论</button>
        </form>
    </section>
</main>

<footer class="footer">
    <div class="container">
        <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
        <div class="social-links">
            <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
            <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
        </div>
    </div>
</footer>

<button id="back-to-top" title="回到顶部" aria-label="回到页面顶部">↑</button>

<script src="js/script.js"></script>
</body>
</html>
